<template>
  <div>数量:{{ num }} <button @click="add(5)">add</button></div>
  <userAdd></userAdd>
  <div>
    <div class="table">
      <div class="tr">
        <div class="td">id</div>
        <div class="td">用户名</div>
        <div class="td">年龄</div>
        <div class="td">操作</div>
      </div>
      <div class="tr" v-for="item in list" :key="item.id">
        <div class="td">{{ item.id }}</div>
        <div class="td">{{ item.username }}</div>
        <div class="td">{{ item.userage }}</div>
        <div class="td" @click="del(item.id)">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { getList, delById } from "@/Service/UserService";
import userAdd from "@/components/userAdd.vue";
export default {
  components: { userAdd },
  computed: {
    ...mapState(["list", "num"]),
  },
  methods: {
    ...mapMutations(["add", "addlist", "dellist", "resetlist"]),
    async del(id) {
      await delById(id);
      this.dellist(id);
    },
  },
  async created() {
    const res = await getList();
    this.resetlist(res);
  },
};
</script>

<style scoped>
.table {
  width: 100%;
}
.table .tr {
  display: flex;
}
.table .tr .td {
  flex: 1;
  text-align: center;
  line-height: 40px;
  background-color: black;
  color: white;
}
</style>
